<template>
    <div class="common-layout">
        <el-container class="wrapper">
            <!-- 侧边栏 -->
            <el-aside width="120px">
                <!-- 左侧导航栏 -->
                <el-menu default-active="2" class="el-menu-vertical-demo" :router="true" expand-on-click-node>
                    <el-menu-item v-for="item in moduleList" :key="item.id"
                        @click="storageParent(item.parentId, item.path)">
                        <el-icon style="color:white"><icon-menu /></el-icon>
                        <span style="color:white">{{ item.name }}</span>
                    </el-menu-item>
                </el-menu>
                <!-- 门店切换 -->
                <div style="margin-top:39.7vh">
                    <el-select v-show="store.getUserInfo().IsTenant" v-model="storeIdVariable" placeholder="请选择门店"
                        clearable filterable @change="switchStore">
                        <el-option v-for="item in storeList.value" :key="item.StoreId" :label="item.StoreName"
                            :value="item.StoreId">
                        </el-option>
                    </el-select>

                </div>
            </el-aside>
            <el-container class=" wrapper">
                <!-- 顶部栏 -->
                <el-header>
                    <span @mouseover="isHover = true" @mouseleave="isHover = false"
                        style="font-weight: 800;font-size: large;color:white">微盟酒店</span>
                    <span v-show="isHover" style="margin-left:10px">修改</span>
                    <div style="float:right">
                        <i class="el-icon-search"></i>
                        <el-link @click="drawerVisible = true" style="color:white">服务搜索</el-link>|
                        <el-link href="https://master.weimob.com/app/basis/4022162657659/6016680466659/taocan/contrast"
                            style="color:white">套餐升级</el-link>|
                        <el-link style="color:white">系统通知</el-link>|
                        <el-link href="https://help.weimob.com/os" style="color:white">帮助指引</el-link>


                        <!-- 用户名 -->
                        <span style="margin:0 10px;color:white">欢迎，尊敬的{{ userName }}</span>
                        <el-button type="danger" size="default" @click="loginOut">退出登录</el-button>


                        <!-- 抽屉 -->
                        <el-drawer v-model="drawerVisible" direction="rtl">
                            <template #header>
                                <h1>服务搜索</h1>

                            </template>
                            <el-form :inline="false">
                                <el-form-item>
                                    <el-input id="search" placeholder="输入您需要的功能或服务" style="width:300px;"
                                        v-model="content" />
                                    <!-- 智能搜索 -->
                                    <div>
                                        <el-card style="width:300px" class="target"
                                            v-show="content != '' && cardVisiable">
                                            <p style="width:260px" v-for="(item, index) in selectResult.value"
                                                :key="index" @mouseenter="handleMonseEnter($event)"
                                                @mouseleave="handleMonseLeave($event)" @click="handleSelectClick(item)">
                                                {{ item.PName }}
                                                <span style="float:right">{{ item.Path }}</span>
                                            </p>
                                        </el-card>
                                    </div>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" size="default">
                                        <Search style="width: 1em; height: 1em; margin-right: 8px" />搜索
                                    </el-button>

                                </el-form-item>
                            </el-form>
                        </el-drawer>
                    </div>
                </el-header>
                <el-main>
                    <RouterView />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import {
    Menu as IconMenu,

} from '@element-plus/icons-vue'

import { ref, reactive } from "vue"
import { session } from "../../stores/storageHelper"
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from 'axios';
import { loginStore } from '@/stores/login';
import router from '@/router';
import { useRoute } from "vue-router"
import $ from "jquery"
import { computed } from 'vue';

import { onMounted, watch } from 'vue';
import { isDebuggerStatement } from 'typescript';
import { baseURL_dev } from '@/config/baseURL'

const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL;

const store = loginStore();
const Route = useRoute();

const isHover = ref(false)

const moduleList = [
    {
        id: 1,
        name: "概况",
        path: "/index/general",
        parentId: "",
    },
    {
        id: 2,
        name: "房态",
        path: "/index/subIndex/RoomTypeList",
        parentId: "RoomType",
    },
    {
        id: 3,
        name: "订单",
        path: "/index/subIndex/OrderList",
        parentId: "Order",
    },
    {
        id: 4,
        name: "客户",
        path: "/index/subIndex/CustomerView",
        parentId: "Customer",
    },
    {
        id: 5,
        name: "门店",
        path: "/index/subIndex/storeList",
        parentId: "Store",
    },
    {
        id: 6,
        name: "数据",
        path: "/index/subIndex/statistics",
        parentId: "Data",
    },
    {
        id: 7,
        name: "设置",
        path: "/index/subIndex/storeInfo",
        parentId: "Top",
    },
]
//存储父类
function storageParent(parentId: string, path: string) {
    let empId = store.getUserInfo().IsTenant ? store.getUserInfo().TenantId + 'admin' : store.getUserInfo().UId;
    //debugger;
    if (empId == 'admin') {
        return;
    }
    //判断是否有该权限
    axios.post(baseURL + `Permission/DeterminesWhetherHasThisPermission?empId=${empId}&path=${path}`).then(res => {
        if (res.data.Data) {
            //有该权限
            session.set("parentId", parentId)
            router.push(path)
        }
        else {
            //没有该权限
            ElMessage.error("您没有该权限");
        }
    })
}



//抽屉
const drawerVisible = ref(false)

//用户名
const userName = ref('')


//退出登录
function loginOut() {
    ElMessageBox.confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            axios.post('Employee/LoginOut').then(
                res => {
                    store.setIsLogin(false);
                    store.setUserInfo({
                        UId: '',
                        UName: '',
                        Token: '',
                        StoreId: '',
                        TenantId: "",
                        IsTenant: false,
                    })
                });
            //清空session
            session.clear();
            //清空请求头
            axios.defaults.headers.common['Authorization'] = '';
            store.setIsLogin(false);
            router.push('/userLogin');
        }).catch(() => { });
}

//门店切换

const storeIdVariable = ref(store.getUserInfo().StoreId || '')
//门店列表
const storeList = reactive({
    StoreId: 0,
    StoreName: "",
})
//获取门店列表
function getStoreList() {
    //debugger;
    axios.get('Store/GetStoreListByTenantIdUseForEmpAdd').then(res => {
        storeList.value = res.data.Data;
        console.log(storeList.value)
    })
}
//切换门店
function switchStore() {
    //console.log(String(storeIdVariable.value))
    store.setUserInfo({
        UId: store.getUserInfo().UId,
        UName: store.getUserInfo().UName,
        Token: store.getUserInfo().Token,
        StoreId: String(storeIdVariable.value),
        TenantId: store.getUserInfo().TenantId,
        IsTenant: store.getUserInfo().IsTenant,
    });
}
interface IPermission {
    PId: string,
    PName: string,
    ParentId: string,
    Path: string,
    Icon: string,
}
const permissonList = reactive<IPermission[]>([])
const content = ref('')
//获取所有的权限
function getAllPermissions() {
    axios.get("Permission/GetAllPermissions").then(res => {
        permissonList.value = res.data.Data;
    })
}
//输入模糊查
const selectResult = reactive<IPermission[]>([])
//内容模糊查
watch(content, async (newValue, oldValue) => {
    selectResult.value = permissonList.value.filter(x => x.PName.includes(newValue))
})


//鼠标划入
function handleMonseEnter(e) {
    //console.log(e);
    e.currentTarget.className = 'active'
}
function handleMonseLeave(e) {
    //console.log(e);
    e.currentTarget.className = ''
    //selectResult.value = []

}
const cardVisiable = ref(true)
function handleSelectClick(item) {
    console.log(item);
    content.value = item.PName;
    //cardVisiable.value = false;
    selectResult.value = []
}


onMounted(() => {
    userName.value = store.getUserInfo().UName;
    getStoreList();
    getAllPermissions();
})

</script>
<style scoped>
.p {
    font-weight: bold;
}

.active {
    background-color: lightblue;
    border-radius: 2px;
}

.el-card {
    margin-bottom: 20px;
}

.el-menu {
    background-color: #263138
}

.el-aside {
    height: 100vh;
    background-color: #263138
}


.el-link {
    margin: 10px
}

.el-header {
    background-color: rgb(42, 146, 225);
    border-bottom: 1px solid #e6e6e6;
    line-height: 50px;
}

.el-main {
    background-color: gainsboro;
}

.wrapper {
    height: 100vh;
    /* 设置框架的高度为可视窗口的高度 */
    overflow: auto;
    /* 让框架具有滚动条 */
    position: relative;
    /* 设置框架的position为relative */
}
</style>